<template>
  <div class="">
    <ul v-if="functionType == 0">
      <li v-for="item in roleList">
        <div class="roleBox" :class="{'roleBoxAct':checkActOrNot(item)}">
          <img :src="newgetSrc(item)" alt="" /><span>{{item.rolename}}</span>
        </div>
      </li>
    </ul>
    <ul v-else>
      <li v-for="item in roleList">

        <div class="roleBox" :class="{'roleBoxAct':checkActOrNot(item)}" @click="checkItem(item)">
          <img :src="getSrc(item)" alt="" /><span>{{item.rolename}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import resourcesStore from '@/cache/resourcesStore.js'
  import userManagerStore from '@/page/userManager/userManagerStore.js'
  export default {
    components: {

    },
    props: {
      nowCheckedIds: {
        type: Array,
        default () {
          return []
        }
      },
      // 0只是展示，1可进行编辑
      functionType: {
        type: Number,
        default () {
          return 0
        }
      },
    },
    data () {
      return {

      }
    },
    computed: {
      getSrc (item) {
        return item => {
          return resourcesStore.getters.getResourcesByName('/roleList/'+(this.nowCheckedIds.includes(item.id)? 'checked.png':'unchecked.png'))
        }
      },
      newgetSrc (item) {
        return item => {
          return resourcesStore.getters.getResourcesByName('/roleList/'+(this.nowCheckedIds.includes(item.id)? 'newcheck.png':'unchecked.png'))
        }
      },
      roleList () {
        return userManagerStore.state.allRoles
      }
    },
    watch: {

    },
    mounted () {
      userManagerStore.commit('getAllRoles')
      if(isempty(this.nowCheckedIds)&&this.functionType!=0) {
        for(let i=0;i<this.roleList.length;i++) {
          if(this.roleList[i].rolename=="系统角色") {
            this.nowCheckedIds.push(this.roleList[i].id)
          }
        }
      }
    },
    methods: {
      checkItem (item) {
        if(this.nowCheckedIds.includes(item.id)) {
          this.$delete(this.nowCheckedIds,this.nowCheckedIds.indexOf(item.id))
        } else {
          this.$set(this.nowCheckedIds,this.nowCheckedIds.length,item.id)
        }
      },
      checkActOrNot (item) {
        return this.nowCheckedIds.includes(item.id)
      },
    }
  }
</script>

<style>
  li {
    margin-bottom: 12px;
  }

  .roleBox {
    display: inline-flex;
    border: solid 1px #E4E4E4;
    width: 120px;
    height: 32px;
    border-radius: 2px;
    align-items: center;
  }

  .roleBox>img {
    margin: 0 6px 0 12px;
  }

  .roleBox>span {
    font-size: .12rem;
  }

  /* .roleBoxAct{
		border-color: #3D7EFF;
	} */

  .roleBoxAct span {
    color: #666666;
  }
</style>